<template>
  <div id="login">
    <p class="tit">欢迎登录豆瓣餐厅</p>
    <div class="font">
      <div class="cli" @click="change">
        <transition name="van-slide-up">
          <div id="full" v-show="visible">
            <div class="full_cont">登录前请先勾选</div>
            <div class="san_bot"></div>
            <div class="san_top"></div>
          </div>
        </transition>
        <van-icon class="vi" v-if="!van" name="passed" />
        <van-icon class="vi vc" v-else name="checked" />
      </div>
      新手机号将自动注册，已详读并同意
      <span>豆瓣使用协议、个人信息保护政策</span>
      <button class="but_top" @click="hint">
        <van-icon name="wechat" />微信登录
      </button>
      <button class="but_bot" @click="hint">账号密码登录</button>
      <div class="log" @click="hint">手机号登录</div>
      <div class="bot">
        <van-divider>其他登录方式</van-divider>
        <!-- 开发跳转主页按钮 -->
        <button @click="index">开发跳转主页按钮</button>
        <div class="other" @click="hint">
          <span class="iconfont icon-xinlangweibo"></span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      van: false,
      visible: false,
      time: null,
    };
  },
  methods: {
    /* 协议勾选框 */
    change() {
      this.van = !this.van;
      if (this.van === true) {
        this.visible = false;
        clearTimeout(this.time);
      }
    },
    /* 登录事件 */
    hint($event) {
      /* 防抖 */
      if (this.time !== null) {
        clearTimeout(this.time);
      }
      if (this.van === false) {
        this.visible = true;
        this.time = setTimeout(() => {
          this.visible = false;
        }, 2000);
      } else {
        /* 跳转账号密码登录页面，其他三个模块功能暂未开发 */
        if ($event.target.className === "but_bot") {
          this.$router.push("/login_two");
          this.$toast.clear();
        } else {
          this.$toast.fail("该功能正在研发");
        }
      }
    },
    // 开发者登陆页面
    index() {
      sessionStorage.setItem("token", "9d4c67daca584384a5b55054e19ea7d7");
      this.$router.push("/index");
    },
  },
};
</script>

<style>
</style>